<template>
    <div class="topRight hidden-sm-and-down">
        <el-avatar :size="40" :src="state.imgUrl" class="block" />
        <span class="el-dropdown-link">
            你好,管理员！
        </span>
        <el-dropdown @command="handleCommand">
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="a">首页</el-dropdown-item>
                    <el-dropdown-item command="b">权限管理</el-dropdown-item>
                    <el-dropdown-item command="c">退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
  
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
import 'element-plus/theme-chalk/display.css'
import { useStore } from 'vuex'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import imgUrl from "../assets/images/img.jpg";
const store = useStore()
const state = reactive({
    imgUrl: imgUrl
})
const router = useRouter()
const handleCommand = (command: string | number | object) => {
    if (command === 'a') {
        router.push('/system')
    } else if (command === 'b') {
        router.push('/authority')
    } else if (command === 'c') {
        localStorage.clear()
        store.commit('CHANGE_LOGINSTATE', false)
        router.push('/login')
    }
}
</script>
<style scoped>
.el-dropdown {
    line-height: 50px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.topRight {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>
  